<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 300px;
      height: 300px;
      background-color: aquamarine;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: chartreuse;
    }

    .box3 {
      width: 100px;
      height: 100px;
      background-color: coral;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 阻止默认事件 v-on:click.prevent -->
    <a href="https://www.baidu.com" @click.prevent>百度</a>

    <div class="box1">
      <div class="box2">
        <div class="box3"></div>
      </div>
    </div>
  </div>
  <script src="../vue.js"></script>
  <script>
    const vm = new Vue({
      data: {},
      methods: {
      }
    })
    vm.$mount('#app');

    function print1() {
      console.log('box1');
    }
    function print2() {
      console.log('box2');
    }
    function print3() {
      console.log('box3');
    }
    const box1 = document.querySelector('.box1');
    const box2 = document.querySelector('.box2');
    const box3 = document.querySelector('.box3');
    //捕获阶段就会触发事件处理函数
    box1.addEventListener('click', print1, true)
    box2.addEventListener('click', print2, true)
    box3.addEventListener('click', print3, true)
  </script>
</body>

</html>